<template>
	<view style="background-color: #f7f7f7">
		<view class="tix">
			<view class="le">提现到</view>
			<view class="rig" @click="open">
				<view class="">{{backname}}</view>
				<image src="../../static/gengduo.png" mode=""></image>
			</view>
		</view>
		<view class="money">
			<view class="sum">提现金额</view>
			<view class="input">
				<view class="chi">￥</view>
				<u--input placeholder="请输入内容" border="bottom" clearable v-model="value" @change="change" style="width: 80%"></u--input>
			</view>
			<view class="line">
				<button class="btn" @click="withdraw">确定提现</button>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="tanchu">
			<u-popup
				:show="show"
				mode="bottom"
				:safeAreaInsetBottom="true"
				:safeAreaInsetTop="true"
				round="10"
				overlay="true"
				closeable="true"
				closeOnClickOverlay="true"
				@close="close"
			>
				<view class="uni-list">
					<view class="account">账号选择</view>
					<radio-group @change="radioChange">
						<label class="uni-list-cell" v-for="(item, index) in items" :key="item.value">
							<view class="aount">
								<image class="imgRadio" src="../../static/yinlian.png" mode="widthFix"></image>
								<view>{{ item.newbackname }}</view>
							</view>
							<view>
								<radio :value="item.bankname" :checked="index === current" color="#3681F3" />
							</view>
						</label>
					</radio-group>
					<!-- <view class="b"></view> -->
					<button class="btn1" @click="confirm">确认</button>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: '',
			show: false,
			backcardid:'',
			backname:'',
			items: [
				{
					value: 'USA',
					name: '微信钱包',
					img: '../../static/icon_zhifubao.png'
				},
				{
					value: 'CHN',
					name: '中国工商银行储蓄卡(0379)',
					img: '../../static/yinlian.png'
				},
				{
					value: 'BRA',
					name: '中国建设银行储蓄卡(2586)',
					img: '../../static/yinlian.png'
				}
			],
			current: 0
		};
	},
	onLoad() {
		this.getWithdrawCardList();
	},
	methods: {
		// 申请提现
		withdraw() {
			this.$api.post('my/withdraw', { money: this.money, cardid: this.cardid }).then((res) => {
				console.log('申请提现', res);
			});
		},
		// 提现卡号列表
		getWithdrawCardList() {
			this.$api.get('my/getWithdrawCardList', { pagenum: 1 }).then((res) => {
				
				res.list.forEach((item,index) =>{
					// let lastfour = item.bankcardnum.slice(-4)
					let newbackname = item.bankname + '(' +item.bankcardnum.slice(-4) + ')'
					item.newbackname = newbackname
					if(index === 1){
						this.backname = item.newbackname
					}
					console.log('卡号列表项111',item.newbackname,index)
				})
				this.items = res.list;
				console.log('卡号11', res, this.items);
			});
		},
		change(e) {
			console.log('change', e);
		},
		open() {
			this.show = true;
			console.log('open');
		},
		close() {
			this.show = false;
			console.log('close');
		},
		radioChange: function (evt) {
			console.log('选择银行卡', evt);
			for (let i = 0; i < this.items.length; i++) {
				if (this.items[i].backname === evt.detail.value) {
					this.current = i;
					this.backcardid = this.items[i].bankcardnum
					console.log('卡111',i,this.current,this.backcardid)
				}
			}
			console.log('卡111',this.current)
		},

		confirm() {
			this.show = false;
		}
	}
};
</script>

<style lang="scss">
.tix {
	margin: 20rpx 27rpx;
	background-color: #fff;
	// width: 697rpx;
	height: 60rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 28rpx 33rpx;
	line-height: 60rpx;
	display: flex;
	justify-content: space-between;
	.le {
		font-weight: bold;
		font-size: 27rpx;
		color: #333333;
		// line-height: 32rpx;
	}
	.rig {
		font-weight: 500;
		font-size: 27rpx;
		color: #333333;
		// line-height: 32rpx;
		display: flex;
	}
	image {
		width: 11rpx;
		height: 20rpx;
		margin-left: 20rpx;
		margin-top: 21rpx;
	}
}
.money {
	width: 697rpx;
	height: 373rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 36rpx 32rpx;
	margin: 40rpx 27rpx;
}
.chi {
	margin-top: 14rpx;
}
.line {
	// border: 1rpx solid #F5F5F5;
	margin-top: 70rpx;
}
.input {
	display: flex;
	margin-top: 67rpx;
}
.btn {
	width: 400rpx;
	height: 87rpx;
	background: #3681f3;
	border-radius: 43rpx;
	font-weight: bold;
	font-size: 32rpx;
	color: #ffffff;
	// line-height: 32rpx;
}
// 弹窗
.u-popup-slot {
	width: 200px;
	height: 150px;
	@include flex;
	justify-content: center;
	align-items: center;
}
.uni-list-cell {
	display: flex;
	justify-content: space-between;
	height: 120rpx;
}
.uni-list {
	margin: 32rpx 40rpx;
}
.account {
	width: 100%;
	text-align: center;
	font-weight: bold;
	font-size: 32rpx;
	color: #333333;
	line-height: 32rpx;
	margin-bottom: 50rpx;
}
.aount {
	display: flex;
	// justify-content: space-between;
}
.imgRadio {
	width: 53rpx;
	// height: 33rpx;
	margin-top: 10rpx;
	margin-right: 20rpx;
}
.btn1 {
	background: #3681f3;
	border-radius: 13rpx;
	font-weight: bold;
	font-size: 29rpx;
	color: #ffffff;
	width: 670rpx;
	height: 87rpx;
}
</style>